<template>
    <div style="display: flex; align-items: center">
        <div style="height: 60vh; width: 200px; padding: 24px">
            <el-steps direction="vertical" :active="videoActive">
                <el-step title="视频参数设置"></el-step>
                <el-step title="排队"></el-step>
                <el-step title="讲稿生成"></el-step>
                <el-step title="讲稿修改"></el-step>
                <el-step title="音频生成"></el-step>
                <el-step title="视频生成"></el-step>
                <el-step title="生成完成"></el-step>
            </el-steps>
        </div>
        <div style="position: absolute; top: 0; right: 0; z-index: 100">
            <el-button @click="checkReflash">刷新状态</el-button>
        </div>
        <div v-if="!isError" style="flex: 1; padding: 20px">
            <div v-if="videoActive === 1">
                <el-form label-width="100px" style="margin-bottom: 20px">
                    <el-form-item label="视频名称">
                        <el-input v-model="uploadParams.name" placeholder="请输入生成视频名称" />
                    </el-form-item>
                    <el-form-item label="声音选择">
                        <el-radio-group v-model="voiceType">
                            <el-radio label="man">男声</el-radio>
                            <el-radio label="woman">女声</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="角色选择">
                        <el-radio-group v-model="charactersType">
                            <el-radio v-for="item, index in characterData" v-model="charactersType" :label="item.name">
                                <img :src="item.image" alt="角色头像" style="width: 100px; height: 200px;"></img>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>

                <el-upload class="upload" ref="docUpload" drag :data="uploadParams" :action="`${extractURI}ppt2speech`"
                    :limit="1" :on-exceed="handleDocExceed" :on-success="handleDocSuccess" :on-error="handleDocError"
                    :on-change="handleDocFileChange" :on-remove="handleDocRemove" :before-upload="handleDocBeforeUpload"
                    accept=".pptx">
                    <div class="el-upload-area">
                        <div class="loading" v-show="docBtnLoading">
                            <img src="@/assets/loading2.gif" />
                            <span>文件正在上传</span>
                        </div>
                        <i class="el-icon-upload" style="margin-top: 40px"></i>
                        <div class="el-upload__text" style="text-align: center; font-size: 16px; font-weight: bold">
                            将PPTX文件拖拽到此处，或 <em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" style="text-align: center">
                            只能上传 pptx 文件，且不超过100MB
                        </div>
                    </div>
                </el-upload>
            </div>

            <div v-else-if="videoActive == 2" class="generation-status" style="padding: 20px; text-align: center">
                <div class="waiting-position">
                    <div class="progress-wrapper"></div>
                    <div style="
              display: flex;
              width: 100%;
              justify-content: center;
              align-items: center;
            ">
                        <img v-if="videoActive == 2" src="@/assets/waitting.png" style="height: 40vh; padding: 24px" />
                    </div>
                </div>
                <i class="el-icon-loading"></i>
                <h2>{{ videoGenerateStatus }}</h2>
            </div>

            <div v-else-if="videoActive == 3" class="generation-status" style="padding: 20px; text-align: center">
                <div class="waiting-position">
                    <div class="progress-wrapper"></div>
                    <div style="
              display: flex;
              width: 100%;
              justify-content: center;
              align-items: center;
            ">
                        <img v-if="videoActive == 3" src="@/assets/TextBirthing.png"
                            style="height: 40vh; padding: 24px" />
                    </div>
                </div>
                <i class="el-icon-loading"></i>
                <h2>{{ videoGenerateStatus }}</h2>
            </div>

            <div v-else-if="videoActive == 4" class="" style="padding: 20px; text-align: center">
                <div>
                    <h2>讲稿修改</h2>
                    <el-form style="margin-bottom: 20px;margin: auto">
                        <div v-for="(segment, index) in speechSegments" :key="index">
                            <el-form-item :label="`段落 ${index + 1}`">
                                <el-input type="textarea" v-model="speechSegments[index]" :rows="5"
                                    placeholder="请修改讲稿内容" style="width: 100%; margin-bottom: 15px;"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item>
                            <el-button type="primary" @click="submitSpeechText">提交讲稿并继续生成视频</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <div v-else-if="videoActive > 4 && videoActive < 7" class="generation-status"
                style="padding: 20px; text-align: center">
                <div class="waiting-header">
                    <div class="waiting-position">
                        <div class="progress-wrapper"></div>
                        <div style="
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
              ">
                            <img v-if="videoActive == 2" src="@/assets/waitting.png"
                                style="height: 40vh; padding: 24px" />
                            <img v-else-if="videoActive == 3" src="@/assets/TextBirthing.png"
                                style="height: 40vh; padding: 24px" />
                            <img v-else-if="videoActive == 5" src="@/assets/TextToAudio.png"
                                style="height: 40vh; padding: 24px" />
                            <img v-else-if="videoActive == 6" src="@/assets/VedioBirthing.png"
                                style="height: 40vh; padding: 24px" />
                        </div>
                    </div>
                    <i class="el-icon-loading"></i>
                    <h2>{{ videoGenerateStatus }}</h2>
                </div>
            </div>

            <div v-else-if="videoActive == 7" class="generation-status" style="padding: 20px; text-align: center">
                <div class="waiting-position">
                    <div class="progress-wrapper"></div>
                    <div style="
              display: flex;
              width: 100%;
              justify-content: center;
              align-items: center;
            ">
                        <video-player style="width: 44vw" v-if="video_task_info.video_task_finished"
                            v-model="video_task_info.video_url" :ref-id="video_task_info.title"
                            :title="video_task_info.title" @loadError="videoSourceLoadError" />
                    </div>
                </div>
                <div style="margin-top: 20px; font-size: 16px; font-weight: bold">
                    <el-button @click="goToCreateVedio">
                        视频已经生成完了，点击生成下一个视频
                    </el-button>
                </div>
            </div>
        </div>
        <div v-else
            style="display: flex;flex-direction: column;justify-content: center;align-items: center;  width: 100%; text-align: center; color: red; font-size: 20px">

            <img src="@/assets/error.png" height="400" width="400" />
            <p>发生错误，请检查网络连接或联系管理员。</p>
            <el-button type="primary" @click="reload">重新生成</el-button>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import VideoPlayer from "@/components/VideoPlayer";
import { fetchSpeech } from "../../../../../api/course/course";
import { set } from "nprogress";

export default {
    name: "DigitalHumanVideo",
    components: {
        VideoPlayer
    },
    props: {
        courseId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isError: false,
            videoActive: 1,
            extractURI: "http://10.21.22.107:5006/", // 接口路径
            extractURIJAVA: "http://111.63.183.17:8217/",
            videoURI: "http://111.63.183.17:8217/api/course/video/selectById",
            uploadParams: {
                name: ""
            },
            characterData: [], // 数字人头像数据
            charactersType: "old_man", // 默认角色类型
            videoGenerateStatus: "", // 视频生成状态
            generationProgress: 0, // 视频生成进度
            docBtnLoading: false, // 文件上传按钮加载状态
            docFlag: false, // 文件是否已上传标志
            voiceType: "man", // 默认选择女声
            jobId: null,
            audio_job_id: null,
            speech_job_id: null,
            video_job_id: null,
            jobQueryTimer: null,
            positionBeforeYou: 0,
            speechText: "", // 讲稿内容
            speechSegments: [], // 讲稿分段内容
            speechSeparator: "##################", // 分隔符
            pptFile: null, // 保存上传的PPT文件
            speechGenerated: false, // 讲稿是否已生成
            video_task_info: {
                video_task_finished: false,
                video_url: "",
                title: ""
            },
            postForm: {
                id: '' // 用于存储课程ID
            }
        };
    },
    computed: {
        ...mapGetters(["userId", "deptCode"])
    },
    created() {
        this.getCourseId();
        this.fetchPicForCharacter();
    },
    methods: {
        fetchPicForCharacter() {
            // 获取数字人头像
            axios.get(`${this.extractURI}characters`)
                .then((response) => {
                    if (response.data && response.data.status == "success") {
                        this.characterData = response.data.characters;
                        console.log("获取数字人头像成功:", this.characterData);
                    } else {
                        this.$message.error("获取数字人头像失败，请稍后重试");
                    }
                })
                .catch((error) => {
                    console.error("获取数字人头像失败:", error);
                    this.$message.error("获取数字人头像失败，请稍后重试");
                });
        },
        getCourseId() {
            // 获取课程ID，可以来自props或URL
            this.postForm.id = this.courseId || this.getCourseIdFromUrl();

            this.uploadParams = {
                name: this.uploadParams.name,
                user_id: this.userId,
                dept_code: this.deptCode,
                course_id: this.postForm.id,
                voice: this.voiceType,
                character: this.charactersType
            };
            console.log("课程ID:", this.postForm.id);

            // 检查已有的任务ID
            if (this.postForm.id) {
                this.speech_job_id = localStorage.getItem(this.postForm.id + "_speech");
                this.audio_job_id = localStorage.getItem(this.postForm.id + "_audio");
                this.video_job_id = localStorage.getItem(this.postForm.id + "_video");
                this.checkReflash()
            }
        },

        checkReflash() {
            // 检查是否有正在进行的任务
            if (this.speech_job_id) {
                this.checkSpeechGenerationStatus();
            } if (this.audio_job_id) {
                this.checkAudioGenerationStatus();
            } if (this.video_job_id) {
                this.checkVideoGenerationStatus();
            }
        },

        // 从URL中提取课程ID
        getCourseIdFromUrl() {
            const url = window.location.href;
            const match = url.match(/\/update\/(\d+)/);
            if (match && match[1]) {
                return match[1];
            }
            return '';
        },

        // 文件上传相关方法
        handleDocExceed() {
            this.$message.warning("只能上传一个PPTX文件!");
        },

        handleDocBeforeUpload(file) {
            // 验证文件类型
            const isValidFormat = file.name.toLowerCase().endsWith(".pptx");
            if (!isValidFormat) {
                this.$message.error("请上传PPTX格式文件!");
                return false;
            }

            // 验证文件大小（100MB限制）
            const isLt50M = file.size / 1024 / 1024 < 100;
            if (!isLt50M) {
                this.$message.error("上传的PPTX文件大小不能超过100MB!");
                return false;
            }

            this.docBtnLoading = true;
            return true;
        },

        handleDocSuccess(response, file, fileList) {
            this.docBtnLoading = false;
            console.log("文件上传成功:", response);
            this.pptFile = file.raw; // 保存上传的文件对象

            // 检查响应中是否包含成功标志和文件ID
            if (response) {
                this.docFlag = true;
                // 保存讲稿生成的任务ID
                this.speech_job_id = response.job_id.speech_job_id;

                localStorage.setItem(this.postForm.id + "_speech", this.speech_job_id);

                this.$message.success("PPTX文件上传成功!现在开始生成讲稿");

                // 检查是否已上传文件
                if (!this.docFlag) {
                    this.$message.warning("请先上传PPTX文件！");
                    return;
                }
                this.videoActive = 2; // 进入排队状态
                this.videoGenerateStatus = "正在排队处理中...";
                this.generationProgress = 10;
                this.checkSpeechGenerationStatus();
            } else {
                this.$message.error(response.message || response.msg || "文件上传失败!");
                this.docFlag = false;
                // 清空上传列表
                this.$refs.docUpload.clearFiles();
            }
        },

        handleDocError(err) {
            this.docBtnLoading = false;
            this.docFlag = false;
            console.error("文件上传失败:", err);
            this.$message.error("文件上传失败，请重试!");
        },

        handleDocFileChange(file, fileList) {
            // 保持只有一个文件
            if (fileList.length > 1) {
                fileList.splice(0, 1);
            }
        },

        handleDocRemove() {
            this.docFlag = false;
        },

        // 重置视频创建状态，创建新视频
        goToCreateVedio() {
            this.videoActive = 1;
            this.uploadParams.name = "";
            this.video_task_info.video_task_finished = false;
            this.video_task_info.video_url = "";
            this.video_task_info.title = "";
            this.speechText = "";
            this.speechSegments = [];
            this.speechGenerated = false;
            this.pptFile = null;
            localStorage.removeItem(this.postForm.id + "vedio_finished");
            localStorage.removeItem(this.postForm.id + "_video");
            localStorage.removeItem(this.postForm.id + "_audio");
            localStorage.removeItem(this.postForm.id + "_speech");
        },

        // 视频生成状态相关方法
        checkJobOnce(type) {
            try {
                this.jobQueryTimer = setInterval(() => {
                    let id = "";
                    if (type == "speech") {
                        id = this.speech_job_id;
                    } else if (type == "audio") {
                        id = this.audio_job_id;
                    } else {
                        id = this.video_job_id;
                    }
                    axios
                        .post(`${this.extractURI}/check`, {
                            job_id: id,
                            job_type: type
                        })
                        .then((res) => {
                            if (!res.data || !res.data.status || res.data.status == "failed") {
                                this.$message.error("查询任务状态失败，请稍后重试");
                                clearInterval(this.jobQueryTimer);
                                this.jobQueryTimer = null;
                                this.isError = true;
                                return;
                            }
                            if (res.data.status == "processing" && type == "speech") {
                                this.videoActive = 3;
                                this.videoGenerateStatus = "讲稿生成中...";
                                this.generationProgress = 20;
                            } else if (res.data.status == "processing" && type == "audio") {
                                this.videoActive = 5;
                                this.videoGenerateStatus = "音频生成中...";
                                this.generationProgress = 60;
                            } else if (res.data.status == "processing" && type == "video") {
                                this.videoActive = 6;
                                this.videoGenerateStatus = "视频生成中...";
                                this.generationProgress = 80;
                            }
                            if (res.data.status == "finished") {
                                if (type == "video") {
                                    this.videoActive = 7;
                                    this.videoGenerateStatus = "视频生成完成！";
                                    clearInterval(this.jobQueryTimer);
                                    this.fetchVideo(id);
                                    this.jobQueryTimer = null;
                                    this.$message.success("视频生成完成！");
                                    localStorage.setItem(this.postForm.id + "vedio_finished", "yes");
                                } else if (type == "speech") {
                                    // 讲稿生成完成，进入讲稿修改环节
                                    this.videoActive = 4;
                                    this.videoGenerateStatus = "讲稿生成完成，请修改讲稿！";
                                    clearInterval(this.jobQueryTimer);
                                    this.jobQueryTimer = null;
                                    // 获取讲稿内容
                                    this.fetchSpeechContent();
                                    this.$message.success("讲稿生成完成，请修改讲稿！");
                                } else if (type == "audio") {
                                    this.jobId = this.video_job_id;
                                    this.videoActive = 6;
                                    clearInterval(this.jobQueryTimer);
                                    this.jobQueryTimer = null;
                                    this.checkJobOnce("video");
                                } else {
                                    clearInterval(this.jobQueryTimer);
                                    this.jobQueryTimer = null;
                                    this.$message.error("错误的查询");
                                    return;
                                }
                            }
                        })
                        .catch((error) => {
                            clearInterval(this.jobQueryTimer);
                            this.jobQueryTimer = null;
                        });
                }, 1000);
            } catch {
                clearInterval(this.jobQueryTimer);
                this.jobQueryTimer = null;
            }
        },

        // 获取生成的视频
        fetchVideo(videoID) {
            fetch(`${this.videoURI}?videoId=${videoID}`, {
                method: "POST",
                redirect: "follow"
            })
                .then((res) => res.json())
                .then((res) => {
                    const data = res.data;
                    this.video_task_info.video_task_finished = true;
                    this.video_task_info.video_url = data.fileUrl;
                    this.video_task_info.title = this.uploadParams.name;
                    this.$message({
                        type: "success",
                        message: "视频课件保存成功!"
                    });
                })
                .catch((error) => {
                    console.error("Error fetching video:", error);
                    this.$message({
                        type: "error",
                        message: "视频课件保存失败，请稍后再试"
                    });
                });
        },

        // 检查视频生成状态
        checkVideoGenerationStatus() {
            clearInterval(this.jobQueryTimer);
            this.jobQueryTimer = null;

            if (localStorage.getItem(this.postForm.id + "vedio_finished")) {
                this.videoActive = 7;
                this.fetchVideo()
                return;
            }

            this.videoActive = 1;

            axios
                .post(`${this.extractURI}check`, {
                    job_id: this.video_job_id,
                    job_type: "video"
                })
                .then((res) => {
                    if (res.data.status == "finished") {
                        this.videoActive = 7;
                        this.videoGenerateStatus = "视频生成完成！";
                        this.generationProgress = 100;
                        this.$message.success("视频生成完成！");
                        localStorage.setItem(this.postForm.id + "vedio_finished", "yes");
                        this.fetchVideo()
                    } else if (res.data.status == "processing") {
                        this.positionBeforeYou = res.data.position_before_you;
                        this.videoActive = 6;
                        this.checkJobOnce("video");
                        return;
                    }
                    axios
                        .post(`${this.extractURI}check`, {
                            job_id: this.audio_job_id,
                            job_type: "audio"
                        })
                        .then((res) => {
                            if (res.data.status == "finished") {
                                this.videoActive = 6;
                                this.videoGenerateStatus = "音頻生成完成！";
                                this.generationProgress = 70;
                                this.checkJobOnce("video");
                                this.$message.success("音頻生成完成！");
                                return;
                            } else if (res.data.status == "processing") {
                                this.videoActive = 5;
                                this.checkJobOnce("audio");
                                return;
                            }
                        });
                });
            axios
                .post(`${this.extractURI}check`, {
                    job_id: this.speech_job_id,
                    job_type: "speech"
                })
                .then((res) => {
                    if (res.data.status == "finished") {
                        this.videoActive = 4;
                        this.videoGenerateStatus = "讲稿生成完成！";
                        this.generationProgress = 40;
                        // 获取讲稿内容进入修改环节
                        this.fetchSpeechContent();
                        return;
                    } else if (res.data.status == "processing") {
                        this.positionBeforeYou = res.data.position_before_you;
                        if (res.data.position_before_you != 0) {
                            this.videoGenerateStatus = `排队中，前面还有${res.data.position_before_you}人`;
                            this.videoActive = 2;
                            this.generationProgress = 20;
                            setTimeout(() => {
                                this.checkVideoGenerationStatus();
                            }, 2000);
                            return;
                        } else {
                            this.videoActive = 3;
                            this.videoGenerateStatus = "讲稿生成中...";
                            this.checkJobOnce("speech");
                            return;
                        }
                    }


                })
                .catch((err) => {
                    clearInterval(this.jobQueryTimer);
                    this.jobQueryTimer = null;
                    this.isError = true;
                });
        },

        // 检查讲稿生成状态
        checkSpeechGenerationStatus() {
            clearInterval(this.jobQueryTimer);
            this.jobQueryTimer = null;

            this.videoActive = 2;

            axios
                .post(`${this.extractURI}check`, {
                    job_id: this.speech_job_id,
                    job_type: "speech"
                })
                .then((res) => {
                    if (res.data.status == "finished") {
                        this.videoActive = 3;
                        this.videoGenerateStatus = "讲稿生成完成！";
                        this.generationProgress = 30;
                        // 获取生成的讲稿内容
                        if (this.video_job_id || this.audio_job_id) {
                            this.videoActive = 4; // 进入讲稿修改步骤
                            this.$message.success("讲稿生成完成，请修改讲稿！");
                            this.checkAudioGenerationStatus();
                        } else {
                            this.fetchSpeechContent();
                        }
                        return;
                    } else if (res.data.status == "processing") {
                        this.positionBeforeYou = res.data.position_before_you;
                        if (res.data.position_before_you != 0) {
                            this.videoGenerateStatus = `排队中，前面还有${res.data.position_before_you}人`;
                            this.videoActive = 2;
                            this.generationProgress = 20;
                            setTimeout(() => {
                                this.checkSpeechGenerationStatus();
                            }, 2000);
                            return;
                        } else {
                            this.videoActive = 3;
                            this.videoGenerateStatus = "讲稿生成中...";
                            this.checkJobOnce("speech");
                            return;
                        }
                    }
                })
                .catch((err) => {
                    clearInterval(this.jobQueryTimer);
                    this.jobQueryTimer = null;
                    this.isError = true;
                });
        },

        // 获取生成的讲稿内容
        fetchSpeechContent() {
            fetchSpeech(this.speech_job_id)
                .then((res) => {
                    if (res.data) {
                        console.log("获取讲稿内容成功:", res.data);
                        // 保存原始讲稿
                        this.speechText = res.data.speechText;

                        // 将讲稿按分隔符分段
                        const segments = this.speechText.split(this.speechSeparator);

                        // 过滤掉分隔符，并整理段落内容
                        this.speechSegments = segments.map(segment => segment.trim());

                        this.speechGenerated = true;
                        this.videoActive = 4; // 进入讲稿修改步骤
                        this.$message.success("讲稿获取成功，请进行修改");
                    } else {
                        this.$message.error("获取讲稿内容失败");
                    }
                })
                .catch((err) => {
                    console.error("获取讲稿内容失败:", err);
                    this.$message.error("获取讲稿内容失败，请刷新重试");
                });
        },

        reload() {
            // 重新加载页面
            localStorage.removeItem(this.postForm.id + "vedio_finished");
            localStorage.removeItem(this.postForm.id + "_video");
            localStorage.removeItem(this.postForm.id + "_audio");
            localStorage.removeItem(this.postForm.id + "_speech");
            window.location.reload();
        },
        // 提交修改后的讲稿，并生成视频
        submitSpeechText() {
            // 检查所有段落是否都有内容
            const emptySegmentIndex = this.speechSegments.findIndex(segment => !segment.trim());
            if (emptySegmentIndex !== -1) {
                this.$message.warning(`段落 ${emptySegmentIndex + 1} 的内容不能为空`);
                return;
            }

            // 将分段内容重新组合，加入分隔符
            const combinedSpeechText = this.speechSegments.join(`\n${this.speechSeparator}\n`);

            this.videoActive = 5; // 进入音频生成步骤
            this.videoGenerateStatus = "开始生成音频...";

            // 创建FormData对象用于上传
            const formData = new FormData();
            formData.append("speech_id", this.speech_job_id.replace('_speech', ''));
            formData.append("voice", this.voiceType);
            formData.append("name", this.uploadParams.name);
            formData.append("user_id", this.userId);
            formData.append("dept_code", this.deptCode);
            console.log("提交的讲稿内容:", this.charactersType);

            formData.append("character", this.charactersType);

            // 将修改后的讲稿内容创建为TXT文件对象
            const blob = new Blob([combinedSpeechText], { type: 'text/plain' });
            const speechTextFile = new File([blob], "modified_speech.txt", { type: 'text/plain' });
            formData.append("file", speechTextFile); // 使用之前 undocumented 的字段名 speech_content，但值为 File 对象

            // 调用speech2video接口生成视频
            axios
                .post(`${this.extractURI}speech2video`, formData, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                })
                .then((res) => {
                    if (res.data && res.data.job_id) {
                        // 保存任务ID
                        this.audio_job_id = res.data.job_id.audio_job_id;
                        this.video_job_id = res.data.job_id.video_job_id;

                        localStorage.setItem(this.postForm.id + "_video", this.video_job_id);
                        localStorage.setItem(this.postForm.id + "_audio", this.audio_job_id);

                        // 开始检查音频生成状态
                        this.checkAudioGenerationStatus();
                    } else {
                        this.$message.error("提交讲稿失败，请重试");
                        this.videoActive = 4; // 回到讲稿修改步骤
                    }
                })
                .catch((err) => {
                    console.error("提交讲稿失败:", err);
                    this.$message.error("提交讲稿失败，请重试");
                    this.videoActive = 4; // 回到讲稿修改步骤
                });
        },

        // 检查音频生成状态
        checkAudioGenerationStatus() {
            this.checkJobOnce("audio");
        },
    }
};
</script>

<style scoped lang="scss">
.upload {
    height: 300px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    background-color: #fafafa;

    .el-upload-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 20px;
    }

    .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1;

        img {
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
        }
    }
}

.generation-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
</style>
